import { StatusBar, Text, StyleSheet, View } from 'react-native';
import './global';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './src/pages/Home';
import Detail from './src/pages/Detail';
import { Ionicons } from '@expo/vector-icons';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeScreen = () => {
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: '#f4511e',
                },
                // headerBackVisible: false,
                // headerShown: false,
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            }}
        >
            <Stack.Screen
                name='home'
                component={Home}
                options={{
                    title: '首页'
                }}
            />
            <Stack.Screen
                name='detail'
                component={Detail}
            />
        </Stack.Navigator>
    )
}
const Setting = () => <Text>设置页面</Text>
export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={{
                    headerShown: false
                }}
            >
                <Tab.Screen
                    name='homeScreen'
                    component={HomeScreen}
                    options={{
                        title: '首页',
                        tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />
                    }} 
                />
                <Tab.Screen
                    name='setting'
                    component={Setting}
                />
            </Tab.Navigator>
            <StatusBar />
        </NavigationContainer>
    );
}



const styles = StyleSheet.create({
    container: {
        width: width,
        height: height,
        transform: [
            { translateX: -width * .5 },
            { translateY: -height * .5 },
            { scale: scale },
            { translateX: width * .5 },
            { translateY: height * .5 }
        ]
    }
});
